<template>
<div class="container" @click="handleGallaryClick">
	<div class="wrapper">

		<swiper :options="swiperOption">
			<!-- slides -->
			<swiper-slide v-for="(item,index) in imgs" :key="index">
				<img :src="item" class="gallry-img" />
				
			</swiper-slide>
			<!-- Optional controls -->
			<div class="swiper-pagination" slot="pagination"></div>
			

		</swiper>
	</div>

</div>
</template>

<script>
	export default {
		name: 'CommonGallary',
		props: {
			imgs: {
				type: Array,
				defult () {
					return []
				}
			}
		},
		data () {
			return {
					swiperOption: {
						pagination: '.swiper-pagination',
						paginationType : 'fraction',
						observeParents:true,//解决swiper宽度计算
						observer: true//进入页面时自我刷新一次
				}
			}
		},
		methods: {
			handleGallaryClick () {
				
				this.$emit('close')
				
			}
		}
		
	}
</script>

<style lang="stylus" scoped="scoped">
	.container >>> .swiper-container
		overflow: inherit;
	.container
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: fixed;
		z-index: 99;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: #000;
		.wrapper
			width: 100%;
			height: 0;
			padding-bottom: 100%;
			.gallry-img
				width: 100%;	
			.swiper-pagination
				color: #fff;
				bottom: -1rem;
				
</style>